<script lang="ts" setup name='Home'>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import ContentTea from './components/contentTea.vue'
</script>
<template>
    <Header></Header>
    <main class="main-content">
        <div class="illustration">
            <img src="@/assets/svg/welcome/teacher.svg" alt="Illustration" style="width: 800px"> <!-- 插图图片 -->
        </div>
        <div class="text-content">
            <h1>利用AI技术<br>提供专业、高效的教育服务</h1> <!-- 主标题 -->
            <el-button class="try-button" @click="$router.push('/login')">立即体验</el-button>
        </div>
    </main>
    <ContentTea></ContentTea>
    <Footer></Footer>
</template>

<style>


.main-content {
    position: relative;
    display: flex;
    /* 使用Flexbox布局 */
    justify-content: space-between;
    /* 水平分隔内容 */
    align-items: center;
    /* 垂直居中 */
    height: 1000px;
    /* 设置主体部分的高度 */
    padding: 30px;
    /* 主体部分内边距 */
    background-image: url("@/assets/svg/welcome/main-background.svg");
    background-size: cover;
}

.main-content .illustration {
    margin-left: 80px;
    margin-top: -5%;
}

.main-content .text-content {
    color: white;
    /* 文本内容颜色 */
    text-align: left;
    padding-left: 20px;
    /* 左边内边距 */
    margin-right: 70px;
    margin-top: -15%;
}

.main-content .text-content .try-button {
    color: #339AF0;
    font-size: 30px;
    width: 200px;
    height: 70px;
    border-radius: 10px;
}

.main-content h1 {
    font-size: 50px;
    /* 主标题字体大小 */
    line-height: 1.5em;
    /* 行高 */
}

.white-space {
    height: 2000px;
    /* 设置白色空白区域的高度 */
    background-color: #ffffff;
    /* 设置背景颜色为白色 */
}


</style>
